'use client';

import { DefaultThumbnail, ViewersIcon } from '@/components/icons';

export default function CategoryCard({ title, viewers, onClick }) {
    return (
        <div
            className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-indigo-500 transition-all cursor-pointer"
            onClick={onClick}
        >
            <div className="aspect-[4/5] bg-gray-700 flex items-center justify-center">
                <DefaultThumbnail className="w-12 h-12 text-gray-500" />
            </div>
            <div className="p-3">
                <h3 className="text-white font-medium">{title}</h3>
                <div className="flex items-center space-x-1 text-gray-400 text-sm mt-1">
                    <ViewersIcon className="w-4 h-4" />
                    <span>{viewers} 观众</span>
                </div>
            </div>
        </div>
    );
}
